<template>
	<a-input v-if="item.type === 'input'" v-model="dataVal" style="width: 100%" @blur="handleUpdate(dataVal)" :placeholder="item?.title" allow-clear />
	<a-select v-else-if="item.type === 'select'" :bordered="false" style="width: 100%" @popup-visible-change="handleVisible" allow-clear allow-search v-model="dataVal" @change="handleUpdate" @blur="emit('close')" :options="item.options || []" placeholder="选择数据" />
	<slot v-else></slot>
</template>

<script setup lang="ts">
import { getValue } from "@/utils/index";

const props = defineProps({
	item: {
		type: Object as any
	},
	record: {
		type: Object as any
	},
	toggle: {
		type: Boolean,
		default: false
	}
});

const dataVal = ref(getValue(props.record, props.item.slotName))
const emit = defineEmits(["close", "update:toggle", "update"]);
const handleVisible = (data) => {
	emit("update:toggle", data);
};
const handleUpdate = (data) => {
	const flag = getValue(props.record, props.item.slotName) === data;
	if (data === "" || flag) return;
	const obj = JSON.parse(JSON.stringify(props.record));	
	obj[props.item.slotName] = data;
	emit("update", obj);
};
</script>

<style scoped lang="scss"></style>
